<template>
  <div class="login-page">
    <div class="box">
      <a-tabs v-model="activevalue">
        <a-tab-pane key="1" tab="账号登录">
          <a-alert type="error" :message="errortext" banner v-if="errormessage" />
          <div style="padding:15px">
            <a-form-model
              :model="form"
              :rules="userRule"
              ref="form"
              hideRequiredMark
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-model-item prop="username">
                <a-input v-model="form.username" placeholder="请输入账号" size="large" allow-clear>
                  <a-icon slot="prefix" type="user" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item prop="password">
                <a-input-password
                  v-model="form.password"
                  placeholder="请输入密码"
                  size="large"
                  allow-clear
                  ref="password"
                  @keyup.enter="toLogin"
                >
                  <a-icon slot="prefix" type="lock" />
                </a-input-password>
              </a-form-model-item>
              <a-form-item style="margin-top:-7px">
                <a-button type="primary" block size="large" :loading="loading" @click="toLogin">登录</a-button>
              </a-form-item>
            </a-form-model>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="注册账号" force-render>
          <div class="registerbox">
            <a-form-model
              ref="registerform"
              hideRequiredMark
              :model="registerform"
              :rules="registerRule"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-model-item
                label="用户名"
                prop="registerUsername"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 19 }"
              >
                <a-input
                  v-model="registerform.registerUsername"
                  placeholder="请输入用户名"
                  size="large"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item
                label="账户密码"
                prop="registerPwd"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 19 }"
              >
                <a-input
                  v-model="registerform.registerPwd"
                  placeholder="请设置密码"
                  size="large"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item
                label="手机号码"
                prop="registerPhone"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 19 }"
              >
                <a-input
                  v-model="registerform.registerPhone"
                  placeholder="请输入手机号"
                  size="large"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item
                label="真实姓名"
                prop="registernickName"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 19 }"
              >
                <a-input
                  v-model="registerform.registernickName"
                  placeholder="请输入本人真实姓名"
                  size="large"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-item>
                <a-button type="primary" block size="large" @click="toRegister">注册</a-button>
              </a-form-item>
            </a-form-model>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      errormessage: false,
      errortext: "",
      labelCol: { span: 0 },
      wrapperCol: { span: 24 },
      form: {
        username: "",
        password: ""
      },
      registerform: {
        registerUsername: "",
        registerPwd: "",
        registerPhone: "",
        registernickName: ""
      },
      activevalue: "1",
      userRule: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空！" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入正确密码！" }
        ]
      },
      registerRule: {
        registerUsername: [
          { required: true, trigger: "blur", message: "用户名不能为空！" }
        ],
        registerPwd: [
          {
            required: true,
            trigger: "blur",
            min: 3,
            message: "密码不能少于3位！"
          }
        ],
        registerPhone: [
          {
            required: true,
            trigger: "blur",
            min: 11,
            max: 11,
            message: "请输入正确手机号！"
          }
        ],
        registernickName: [
          { required: true, trigger: "blur", message: "姓名不能为空！" }
        ]
      }
    };
  },
  methods: {
    callback(key) {
      //使用this.$store.getters.getuname调取数据
      //this.$store.dispatch('setLogin', true);
      //this.$store.dispatch('setAccount',this.loginData.obj.phone );
    },
    toLogin() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = {
            userName: this.form.username,
            passWord: this.form.password
          };
          this.$axios.post("/login/service/switchUser", data).then(res => {
            if (res.code == 200) {
              // this.$store.dispatch('setLogin', true);
              this.$store.dispatch("setAccount", res.data);
              localStorage.setItem("token", res.data.id);
              localStorage.setItem("userInfo", JSON.stringify(res.data));
              this.$router.push({
                path: "/"
              });
            } else {
              this.errormessage = true;
              this.errortext = res.msg;
            }
          });
        }
      });
    },
    toRegister() {
      //注册
      this.$refs.registerform.validate(valid => {
        if (valid) {
          let data = {
            mobilePhone: this.registerform.registerPhone,
            nickName: this.registerform.registernickName,
            passWord: this.registerform.registerPwd,
            userName: this.registerform.registerUsername
          };
          var that = this;
          this.$axios.post("/user/service/createNo", data).then(res => {
            if (res.code == 200) {
              this.$success({
                title: "温馨提示",
                content: (
                  <div>
                    <h4>账号{res.msg}</h4>
                  </div>
                ),
                onOk() {}
              });
            } else {
              that.$message.success(res.msg);
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 400px;
  // height: 300px;
  background-color: rgba(255, 255, 255, 0.253);
}
.login-page {
  background-color: rgba(108, 192, 248, 0.39);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.registerbox {
  padding: 15px;
  .ant-form-item {
    margin-bottom: 14px;
  }
}
</style>